import { ref } from "vue"

function useDrawer<T = any>(option: { title: string, width?: number, placement?: 'top' | 'right' | 'bottom' | 'left', defaultValue?: T }) {

  const width = ref(option.width)

  const title = ref(option.title)

  const placement = ref(option.placement || 'right')

  const defaultValue = ref<T | undefined>(option.defaultValue)
  function setDefaultValue(data: T) {
    defaultValue.value = data as typeof defaultValue.value
  }


  const visible = ref(false)
  function setVisible(data: boolean) {
    visible.value = data
  }
  function openDrawer() {
    setVisible(true)
  }
  function closeDrawer() {
    setVisible(false)
  }

  return {
    width,
    title,
    placement,
    defaultValue,
    setDefaultValue,
    visible,
    openDrawer,
    closeDrawer
  }
}

export default useDrawer